<template>
  <div class="waitConfirmed">
    <div class="searchBox">
      <Form label-position="right" :label-width="130" class="search-form">
        <Row>
          <Col span="5">
          <FormItem label="检测计划：">
            <Input type="text" v-model="searchParams.planName" :placeholder="`${$t('common.inputInfo')}`" clearable
              class="inputBorder" :maxlength="32"></Input>
          </FormItem>
          </Col>
          <Col span="5">
          <FormItem label="设备类别：">
            <Select v-model="searchParams.categoryId" filterable clearable :placeholder="`${$t('common.selectInfo')}`">
              <Option v-for="(item) of category" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          </Col>
          <!--          <Col span="5">-->
          <!--            <FormItem label="检测方式：">-->
          <!--              <Select v-model="searchParams.checkingType" filterable clearable placeholder="请选择点检方式">-->
          <!--                <Option v-for="(item,index) of cycle" :value="item.key" :key="index">{{ item.name }}</Option>-->
          <!--              </Select>-->
          <!--            </FormItem>-->
          <!--          </Col>-->
          <!--          <Col span="5">-->
          <!--            <FormItem :label="`${$t('maintenance.EquipmentNo')}:`" >-->
          <!--              <Input type="text" v-model="searchParams.deviceMId" :placeholder="`${$t('common.inputInfo')}`" clearable class="inputBorder" :maxlength="32"></Input>-->
          <!--            </FormItem>-->
          <!--          </Col>-->
          <Col span="5" style="display: flex; justifyContent: space-around">
          <Button type="primary" @click="changeNum" v-if="permission.dcmAcctestPlanList">{{ $t('common.Query') }}</Button>
          <Button type="primary" shape="circle" @click="handleBatchDisabled"
            v-if="delIds.length && permission.dcmAcctestDisableRecordBatchDisable">批量禁用</Button>
          <Button type="primary" shape="circle" @click="handleBatchDelete"
            v-if="delIds.length && permission.dcmAcctestPlanDeleteBatch">批量删除</Button>
          </Col>
        </Row>
      </Form>
    </div>
    <div class="tableContent">
      <Table ref="selection" :columns="columns" :data="data" @on-selection-change="onSelectChange">
        <template slot-scope="{ row }" slot="action">
          <span class="operationBtn" @click="confirm(row)" v-if="permission.dcmAcctestDisableRecordDisable">
            <Icon type="android-cancel"></Icon>{{ $t('common.disable') }}
          </span>
          <span class="operationBtn" @click="look(row)" v-if="permission.dcmAcctestPlanQueryById">
            <Icon type="android-cancel"></Icon>{{ $t('common.Check') }}
          </span>
          <span class="operationBtn" @click="edit(row)" v-if="permission.dcmAcctestPlanEdit">
            <Icon type="android-cancel"></Icon>{{ $t('common.Edit') }}
          </span>
          <span class="operationBtn" @click="deleteRow(row)" v-if="permission.dcmAcctestPlanDelete">
            <Icon type="android-cancel"></Icon>{{ $t('common.Delete') }}
          </span>
        </template>
      </Table>
    </div>
    <div class="pageWrap">
      <Page :total="total" :page-size="pageSize" :page-size-opts="$variable.pageSizes" :current="pageNum"
        @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total />
    </div>
    <Modal :mask-closable="false" v-model="delFaultCodeShowF" title="">
      <Row class="enableContent">
        <Col span="24" class="enableContentInner">
        <img width="95px" src="~images/event/del.png" alt="">
        </Col>
        <Col span="24" class="enableTips">
        <span>删除后不会继续生成检测任务，是否确认删除？</span>
        </Col>
      </Row>
      <div slot="footer">
        <Button type="default" @click="delFaultCodeShowF = false">{{ $t('common.Cancle') }}</Button>
        <Button type="primary" :loading="delLoading" @click="deleteOk">{{ $t('maintenance.Confirmed') }}</Button>
      </div>
    </Modal>
    <Modal :mask-closable="false" v-model="confirmFaultCodeShowF" title="禁用检测计划">
      <Form class="search-form" ref="disabledPlanValidate" :rules="ruleValidate" :model="formInline">
        <FormItem label="禁用周期:" class="item" prop="disableCycle">
          <Row>
            <Col span="3">
            1月乘以
            </Col>
            <Col span="10">
            <InputNumber :min="0" :formatter="value => `${parseInt(value)}`" style="width: 100%"
              v-model="formInline.disableCycle" clearable></InputNumber>
            </Col>
            <Col span="9" style="color: #ff0000">禁用X月后再生成任务。</Col>
          </Row>
        </FormItem>
        <FormItem label="禁用原因:" class="item" prop="reason">
          <Input type="textarea" v-model="formInline.reason" clearable :rows="6"></Input>
        </FormItem>
        <FormItem label="" class="item">
          <Row>
            <Col style="color: #ff0000">
            请问您确认要禁用当前检测计划吗？
            </Col>
          </Row>
        </FormItem>
      </Form>

      <div slot="footer">
        <Button type="default" @click="disabledCancel">{{ $t('common.Cancle') }}</Button>
        <Button type="primary" :loading="disabledLoading" @click="disabledOk">{{ $t('maintenance.Confirmed') }}</Button>
      </div>
    </Modal>
    <Modal :mask-closable="false" v-model="create" :title="`${$t('common.Edit')}`">
      <Form class="formList" :model="formItem" label-position="top" inline>
        <FormItem :label="`${$t('ledger.EquipmentType')}:`" class="item" required>
          <Select v-model="formItem.classification" filterable clearable :placeholder="`${$t('common.inputInfo')}`">
            <Option v-for="(item, index) of classification" :value="item.key" :key="index">{{ item.name }}</Option>
          </Select>
        </FormItem>
        <FormItem label="检测项目名称" required>
          <Input type="text" v-model="formItem.materialCode" :placeholder="`${$t('common.inputInfo')}`"
            class="inputBorder" :maxlength="32"></Input>
        </FormItem>
        <FormItem label="检测周期" class="item" required>
          <Select v-model="formItem.period" filterable clearable :placeholder="`${$t('common.inputInfo')}`">
            <Option v-for="(item, index) of period" :value="item.key" :key="index">{{ item.name }}</Option>
          </Select>
        </FormItem>
        <FormItem :label="`${$t('spareParts.Specification')}:`">
          <Input type="text" v-model="formItem.materialCode" :placeholder="`${$t('common.inputInfo')}`"
            class="inputBorder" :maxlength="32"></Input>
        </FormItem>
        <FormItem :label="`${$t('maintenance.Checkmethods')}:`">
          <Input type="text" v-model="formItem.materialCode" :placeholder="`${$t('common.inputInfo')}`"
            class="inputBorder" :maxlength="32"></Input>
        </FormItem>
        <FormItem :label="`${$t('maintenance.Checktools')}:`">
          <Input type="text" v-model="formItem.materialCode" :placeholder="`${$t('common.inputInfo')}`"
            class="inputBorder" :maxlength="32"></Input>
        </FormItem>
        <FormItem :label="`${$t('maintenance.UpperLimit')}:`">
          <Input type="text" v-model="formItem.materialCode" :placeholder="`${$t('common.inputInfo')}`"
            class="inputBorder" :maxlength="32"></Input>
        </FormItem>
        <FormItem :label="`${$t('maintenance.LowerLimit')}:`">
          <Input type="text" v-model="formItem.materialCode" :placeholder="`${$t('common.inputInfo')}`"
            class="inputBorder" :maxlength="32"></Input>
        </FormItem>
        <FormItem :label="`${$t('maintenance.Unit')}:`">
          <Input type="text" v-model="formItem.materialCode" :placeholder="`${$t('common.inputInfo')}`"
            class="inputBorder" :maxlength="32"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="default" @click="create = false">{{ $t('common.Cancle') }}</Button>
        <Button type="primary" @click="addOk">{{ $t('maintenance.Confirmed') }}</Button>
      </div>
    </Modal>
    <Modal :mask-closable="false" v-model="actualShowF" title="禁用记录" width="1200">
      <Table :columns="receiveCol" :data="receivedataArr"></Table>
    </Modal>
  </div>
</template>

<script>
export default {
  name: 'effectivePlan',
  components: {
  },
  props: ['device', 'effPlanList', 'effPlanTotal', 'permission', 'planIds'],
  data() {
    return {
      text: '',
      planId: '',
      delId: '',
      delIds: this.planIds,
      status: '',
      disabledStatus: '',
      total: this.effPlanTotal,
      pageSize: 10,
      pageNum: 1,
      pageSizeOption: [10, 20, 30, 40],
      delLoading: false,
      delFaultCodeShowF: false,//是否显示删除弹窗
      confirmFaultCodeShowF: false,
      disabledLoading: false,
      create: false,
      actualShowF: false,
      searchParams: {},
      formItem: {},
      formInline: {
        disableCycle: null,
        reason: ''
      },
      ruleValidate: {
        disableCycle: [
          { required: true, type: 'number', message: "请输入禁用周期", trigger: "blur" },
        ]
      },
      classification: [
        { name: 'CNC', key: 'CNC' },
        { name: 'PLC', key: 'PLC' },
        { name: 'IPC', key: 'IPC' },
      ],
      receiveCol: [
        { title: '禁用时间', key: 'createTime' },
        { title: '禁用人', key: 'createName' },
        { title: '禁用周期(月)', key: 'disableCycle' },
        { title: '禁用原因', key: 'reason' },
        { title: '启用时间', key: 'enableTime' },
        { title: '启用人', key: 'updateName' }
      ],
      period: [
        { name: '月度', key: 'month' },
        { name: '季度', key: 'quarter' },
        { name: '年度', key: 'year' },
      ],
      category: this.device,
      cycle: [
        { name: "全部", key: "" },
        { name: '定期点检', key: '1' },
        { name: '计数', key: '2' },
        { name: '计时', key: '3' },
      ],
      columns: [
        { type: 'selection', align: 'center', width: 60 },
        { title: '检测计划', key: 'planName', width: 300, align: "center" },
        { title: '设备类别', key: 'categoryName', minWidth: 150, align: "center" },
        // {title: '保养位置', key: 'maintainPosition', minWidth: 100,align: "center"},
        // {title: '保养分类', key: 'classification', minWidth: 100,align: "center"},
        { title: '检测方式', key: 'acctestName', minWidth: 100, align: "center" },
        { title: '触发间隔', key: 'triggerCycleText', minWidth: 100, align: "center" },
        { title: '首次生成时间', key: 'firstTime', minWidth: 200, align: "center" },
        { title: '计划截止时间', key: 'planEndTime', minWidth: 200, align: "center" },
        { title: '任务存活时间', key: 'effectiveHourText', minWidth: 200, align: "center" },
        {
          title: '禁用记录', key: 'disableNum', minWidth: 100, align: "center",
          render: (h, params) => {
            if (params.row.disableNum > 0) {
              return h('div', [
                h('a', {
                  style: {

                  },
                  on: {
                    click: () => {
                      this.getActualNum(params.row)
                    }
                  }
                }, params.row.disableNum)
              ])
            } else {
              return h('div', [
                h('a', {}, params.row.disableNum)
              ])
            }
          }
        },
        { title: '创建人', key: 'realname', minWidth: 200, align: "center" },
        { title: '创建时间', key: 'createTime', minWidth: 200, align: "center" },
        { title: `${this.$t('common.operation')}`, slot: "action", fixed: 'right', minWidth: 240, align: 'center' },
      ],
      data: this.effPlanList,
      receivedataArr: [],
      position: []
    }
  },
  watch: {
    device(newVal) {
      console.log(newVal)
      this.category = newVal
    },
    effPlanList(newVal) {
      this.data = newVal
    },
    effPlanTotal(newVal) {
      this.total = newVal
    },
    planIds(newVal) {
      this.delIds = newVal
    },
  },
  mounted() { },
  methods: {
    onSelectChange(selection) {
      console.log(selection)
      let myArray = [];
      selection.map((item) => {
        myArray.push(item.id);
      });

      this.delIds = myArray;
    },
    deleteOk() {
      this.delLoading = true
      if (this.status == 0) {
        this.axios({
          method: 'delete',
          url: '/dms/dcmAcctestPlan/delete',
          params: {
            id: this.delId
          }
        }).then(res => {

          if (res.code === 200) {
            this.searchList()
            this.$Message.success(({ content: '删除成功！', duration: 2, closable: true }));
          } else {
            this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
          }
        }).finally(() => {
          this.delLoading = false
          this.delFaultCodeShowF = false
        })
      } else {
        this.axios({
          method: 'delete',
          url: '/dms/dcmAcctestPlan/deleteBatch',
          params: {
            ids: this.delIds.toString()
          }
        }).then(res => {

          if (res.code === 200) {
            this.searchList()
            this.$Message.success(({ content: '批量删除成功！', duration: 2, closable: true }));
          } else {
            this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
          }
        }).finally(() => {
          this.delLoading = false
          this.delFaultCodeShowF = false
        })
      }


    },
    confirm(row) {
      //点击展示提示删除弹窗
      this.confirmFaultCodeShowF = true;
      this.planId = row.id
      this.disabledStatus = 0
      console.log(row, 'row')
    },
    deleteRow(row) {
      //点击展示提示删除弹窗
      this.delFaultCodeShowF = true;
      this.delId = row.id
      this.status = 0
      console.log(row, 'row')
    },
    handleBatchDelete() {
      console.log('批量')
      //点击展示提示删除弹窗
      this.delFaultCodeShowF = true;
      this.status = 1
    },
    handleBatchDisabled() {
      this.disabledStatus = 1
      this.confirmFaultCodeShowF = true
    },
    disabledCancel() {
      this.confirmFaultCodeShowF = false
      this.$refs.disabledPlanValidate.resetFields()
    },
    disabledOk() {
      if (this.disabledStatus == 0) {
        let data = {
          planId: this.planId,
          disableCycle: this.formInline.disableCycle,
          reason: this.formInline.reason,
        }
        this.$refs.disabledPlanValidate.validate(valid => {
          if (valid) {
            this.disabledLoading = true
            this.axios({
              method: 'post',
              url: '/dms/dcmAcctestDisableRecord/disable',
              data
            }).then(res => {

              if (res.code === 200) {
                this.searchList()
                this.$Message.success(({ content: '禁用成功！', duration: 2, closable: true }));
              } else {
                this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
              }
            }).finally(() => {
              this.confirmFaultCodeShowF = false
              this.disabledLoading = false
              this.$refs.disabledPlanValidate.resetFields()
            })
          }
        })
      } else {
        let data = {
          planIds: this.delIds.toString(),
          disableCycle: this.formInline.disableCycle,
          reason: this.formInline.reason,
        }
        this.$refs.disabledPlanValidate.validate(valid => {
          if (valid) {
            this.disabledLoading = true
            this.axios({
              method: 'post',
              url: '/dms/dcmAcctestDisableRecord/batchDisable',
              data
            }).then(res => {

              if (res.code === 200) {
                this.searchList()
                this.$Message.success(({ content: '批量禁用成功！', duration: 2, closable: true }));
              } else {
                this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
              }
            }).finally(() => {
              this.confirmFaultCodeShowF = false
              this.disabledLoading = false
              this.$refs.disabledPlanValidate.resetFields()
            })
          }
        })
      }


    },
    look(row) {
      this.$emit('changeDetailVisible', true, row.id)
    },
    getActualNum(row) {
      if (this.permission.dcmAcctestDisableRecordList) {
        this.actualShowF = true
        this.getActualDetail(row.id)
        console.log(row, 'row')
      }

    },
    getActualDetail(planId) {
      this.axios({
        method: 'get',
        url: '/dms/dcmAcctestDisableRecord/list',
        params: {
          planId
        }
      }).then(res => {

        if (res.code === 200) {
          this.receivedataArr = res.data
        } else {
          this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
        }
      }).finally(() => {
      })
    },
    addOk() { },
    //分页
    changeNum() {
      this.pageNum = 1;
      this.searchList();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.searchList();
    },
    changePageNum(val) {
      this.pageNum = val;
      this.searchList();
    },
    searchList() {
      let params = {
        status: 0,
        pageNo: this.pageNum,
        pageSize: this.pageSize,
      };
      for (let key in this.searchParams) {
        if (key === 'orgId' && this.searchParams['orgId']) {
          const arr = this.searchParams[key]
          const { length, last = length - 1 } = arr
          this.$set(params, key, arr[last])
        } else {
          if (this.searchParams[key]) {
            this.$set(params, key, this.searchParams[key])
          }
        }

      }
      this.axios({
        method: 'get',
        url: '/dms/dcmAcctestPlan/list',
        params
      }).then(res => {

        if (res.code === 200) {
          this.data = res.data.list
          this.total = res.data.total
        } else {
          this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
        }
      })
    },
    ok() { },
    cancel() { },
    edit(row) {
      this.$emit('addMaintain', true, row)
    },
  },
}
</script>

<style scoped lang="scss">
/*.waitConfirmed {*/
/*  height: calc(100% - 100px);*/
/*  overflow: scroll;*/
/*}*/
.addModal {
  .addProject {
    .modalTitle {
      position: relative;

      span {
        font-weight: bold;
        font-size: 20px;
      }

      .label {
        display: flex;
        flex-wrap: wrap;

        .item {
          display: flex;

          label {
            width: 150px;
            height: 100%;
            background: #F5F6F7;
          }

          &>div {
            width: 330px;
          }
        }

        .cycle {
          display: flex;

          .ivu-form-item-label {
            width: 150px;
            height: 100%;
            background: #F5F6F7;
          }

          .ivu-form-item-content {
            border: 1px solid #EEEEEE;
            width: 800px;

            .ivu-checkbox-wrapper {
              margin-left: 30px;
            }
          }
        }
      }
    }

    .modalTitle::before {
      content: '';
      position: absolute;
      width: 3px;
      height: 20px;
      top: 5px;
      left: -10px;
      background: #187BDB;
    }

    .tab {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .icon {
        border: 1px solid #187BDB;
        border-radius: 30px;
        padding: 5px 20px 5px 20px;
        display: flex;
        align-items: center;
        margin-left: 20px;
        color: #187BDB;

        i {
          font-size: 20px;
          font-weight: bold;
        }
      }
    }
  }
}</style>
